<template>
  <footer>
    <div class="footer-top">
      <div class="footer-box py-8 lg:flex justify-center text-center max-w-screen-2xl">
        <ul class="lg:flex gap-16 footer-list hidden">
          <li class="li1" v-for="item in navList">
            <h4 class="title">
              <nuxt-link :to="item.url">{{ item.label }}</nuxt-link>
              <span class="plus icon"></span>
            </h4>
            <p class="footersub-nav" v-for="items in item.children">
              <nuxt-link class="sub-title" :to="items.url">{{ items.label }}</nuxt-link>
            </p>
          </li>
        </ul>
        <div class="concat-box lg:px-8 mx-auto lg:mr-0 lg:ml-16 lg:border-l">
          <h4 class="codetext">关注微信官方公众号</h4>
          <div class="codeimg">
            <img :src="contactData.officialAccountsCodeImg" alt="公众号二维码" width="139" height="139">
          </div>
          <div class="tel-num">
            <span>销售热线：</span>
            <a :href="`tel:${contactData.phone}`">{{ contactData.phone }}</a>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="footer-box py-4 text-[#999] text-center text-xs">
        <!-- <p class="footer-left">
          <a target="_blank" href="/sitemap.html">网站地图</a> |
          <a target="_blank" href="/sitemap.xml">XML</a>
        </p> -->
        <p class="footer-copyright">
          <span class="lg:inline-block">Copyright&nbsp;@2024&nbsp;东莞触点智能装备有限公司&nbsp;</span>
          <br class="lg:hidden" />
          <a target='_blank' href="https://beian.miit.gov.cn/">粤ICP备2021039134号</a>
        </p>
      </div>
    </div>
  </footer>
</template>

<script setup >
const navList = useNav();

// 联系方式
const contactData = ref({
  officialAccountsCodeImg: "/images/woaCode.jpg",
  phone: "17725608589",
});
</script>
<style scoped lang="scss">
.footer-top {
  background-color: #3d3d3d;
}
.footer-box {
  margin: 0 auto;
}

.footer-list {
  .title,
  .sub-title {
    color: white;
    cursor: pointer;
  }
  .title {
    font-size: 16px;
    margin-bottom: 12px;
  }
  .sub-title {
    color: #999;
    font-size: 12px;
    margin-bottom: 6px;
    &:hover {
      color: $primary;
    }
  }
}

.concat-box {
  text-align: center;
  border-style: solid;
  border-color: #666;
  .plus {
    font-size: 16px;
    color: #999;
    margin-left: 10px;
  }
  .codetext {
    font-size: 16px;
    color: white;
    margin-bottom: 12px;
  }
  .codeimg {
    margin-bottom: 24px;
    img {
      display: inline-block;
      width: 139px;
      height: 139px;
    }
  }
  .tel-num {
    font-size: 16px;
    color: white;
    a {
      color: white;
    }
  }
}

.footer-bottom {
  background-color: #292929;
}
</style>